<template>
  <div class="container">

    <div>
      <div>
        <el-popover placement="bottom" width="200" trigger="manual"
          content="光纤顶板动态监测主机是一种采用光纤传感技术， 针对顶板的脱落情况、锚杆支护稳定性及潜在危险、超前支撑压力影响范围、 压力的前移速度等进行长期动态监测的主机。具有实时在线监测、传输距离长、 维护量小、传感器监测精度高、使用寿命长、就地显示等功能优势。"
          v-model="visible">
          <img slot="reference" @click="visible = !visible" src="../../assets/BaLaSu/shouye/传感器总数.png" alt="">
        </el-popover>
      </div>
      <div>
        <div>分站数量</div>
        <div> <span style="font-weight: 900; font-size: 25px;">{{ FenZhanCounts }}</span> 个</div>
      </div>
    </div>

    <div>
      <div>
        <el-popover placement="right" width="200" trigger="manual"
          content="应变传感器是一种用于测量应变的传感器， 通常用于煤矿等工业领域中的压力、拉力等物理量的测量。 这种传感器具有高精度、高稳定性、防爆等特点， 能够适应矿山等复杂环境下的测量需求。"
          v-model="visible1">
          <img slot="reference" @click="visible1 = !visible1" src="../../assets/BaLaSu/shouye/在线数量.png" alt="">
        </el-popover>
      </div>
      <div>
        <div>传感器总数</div>
        <div> <span style="font-weight: 900; font-size: 25px;">{{ ChuanGanQiCounts }}</span> 个</div>
      </div>
    </div>

    <div>
      <div>
        <img src="../../assets/BaLaSu/shouye/异常数量.png" alt="">
      </div>
      <div>
        <div>在线数量</div>
        <div> <span style="font-weight: 900; font-size: 25px;">{{ ZhengChangCounts }}</span> 个</div>
      </div>
    </div>


    <div>
      <div>
        <img src="../../assets/BaLaSu/shouye/分站数量.png" alt="">
      </div>
      <div>
        <div>异常数量</div>
        <div> <span style="font-weight: 900; font-size: 25px;">{{ YiChangCounts }}</span> 个</div>
      </div>
    </div>
  </div>
</template>
<script>
import screenfull from "screenfull";
import { BlsFenZhanCount } from '../../https/api/user'
export default {
  data() {
    return {
      isQuanPing: false,
      FenZhanCounts: '',
      ChuanGanQiCounts: '',
      ZhengChangCounts: '',
      YiChangCounts: '',
      visible: false,
      visible1: false,
      time: null

    }
  },
  mounted() {
    this.time = setInterval(() => {
      this.FenZhan()

    }, 1000);

    this.FenZhan()
  },
  methods: {

    async FenZhan() {
      const data = {
        counts: 1
      }
      const res = await BlsFenZhanCount(data)
      console.log(res, '巴拉素首页分站');
      if (res) {
        this.FenZhanCounts = res[0].subcount
        this.ChuanGanQiCounts = res[0].chuanganqicount
        this.ZhengChangCounts = res[0].zxcount
        this.YiChangCounts = res[0].yccount
      }
    },
    screen() {
      // 如果不允许进入全屏，发出不允许提示
      if (screenfull.isEnabled) screenfull.toggle();
      this.$store.commit("SET_ISFULLSCREEN");
      // console.log(screenfull, this.$store.state.system.isFullScreen);
    },

  },

  beforeDestroy() {　　// 离开当前路由前的操作
    clearInterval(this.time)

  }

}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;

  >div {
    width: 50%;
    height: 50%;
    display: flex;
    align-items: center;

    >div:nth-child(1) {
      width: 50%;
      height: 100%;

      img {
        width: 100%;
        height: 80%;
      }
    }

    >div:nth-child(2) {
      width: 50%;
      height: 70%;
      color: aliceblue;

      >div:nth-child(1) {
        text-align: center;
      }

      >div:nth-child(2) {
        text-align: center;
      }

    }
  }
}
</style>
